<template>
    <div>
        <h2>Pinia Better demo</h2>
        <div>
            <p>a:{{ a }}----{{ doubleA }}</p>
            <p>a:{{ b }}----{{ doubleB }}</p>
            <p>both:{{ both }}----{{ doubleBoth }}</p>
        </div>
        <div>
            <!-- 计算属性默认只有取值 无法赋值  -->
            <button @click="a++">a++</button>
            <button @click="b++">b++</button>
            <br>
            <button @click="addA()">a++</button>
            <button @click="addB()">b++</button>
        
        </div>

        <!-- <button @click="demo.a++">{{ demo.a }}</button> -->
    </div>
</template>

<!-- <script >
    // 选项式  => 借助赋值函数
    import {useDemoStore} from "@/stores/demo.js";
    import {mapState,mapActions} from "pinia";


    export default {
        data(){
            return {
            }
        },
        computed:{
            // a(){
            //     return useDemoStore().a;
            // }

            // 通过辅助函数处理 
            // 计算属性 默认只有取值  没有赋值 => 有局限性
            // ...mapState(useDemoStore,["a","b","doubleA","doubleB","both","doubleBoth"])
            ...mapState(useDemoStore,["b","doubleA","doubleB","both","doubleBoth"]),
            ...mapState(useDemoStore,{
                // a:"a",
                // A:"a",
                a:(store)=>{
                    return store.a
                }
            })
        },
        methods:{
            ...mapActions(useDemoStore,["addA","addB"])
        },
        
    }

</script> -->

 <script setup>
    import { toRefs } from "vue";
    import {storeToRefs} from "pinia";   // pinia自带的方法  同 toRefs()
    import {useDemoStore} from "@/stores/demo.js";
    import {useCounterStore} from "@/stores/counter.js";


    // demo => store实例
    const demo = useDemoStore();
    console.log("demo",demo);

    const counter = useCounterStore();

    // 对demo实例进行解构 => demo(Proxy对象 响应式的)  ->  let  a = demo.a;  => a = 1  (直接响应对象解构 会使数据丧失响应性)
    // let {a,b,doubleA,doubleB,both,doubleBoth} = demo;

    console.log(storeToRefs(demo));

    // 数据处理
    // storeToRefs  等价于 toRefs 将响应对象上的每一个属性都转化为 ref 对象(计算属性), ref对象和源对象相互影响 (保证响应性)
    let {a,b,doubleA,doubleB,both,doubleBoth} = storeToRefs(demo);

    // 方法直接解构取值
    let {addA,addB} = demo;




</script> 

<style lang="scss" scoped>

</style>